<template>
  <div class="n-register">
    <van-nav-bar :title="header" left-arrow @click-left="onClickLeft"/>
    <div class="dhp-content">
      <van-row>
        <van-col :offset="2" :span="8">
          <span>订单笔数</span>
          <p>{{ ordersNumber }}</p>
        </van-col>
        <van-col :offset="3" :span="11">
          <span>订单金额</span>
          <p>{{ orderAmount }}</p>
        </van-col>
      </van-row>
      <van-row>
        <van-col :offset="2" :span="8">
          <span>手续费</span>
          <p>{{ handlingFee }}</p>
        </van-col>
        <van-col :offset="3" :span="11">
          <span>实到金额</span>
          <p>{{ actualAmount }}</p>
        </van-col>
      </van-row>
    </div>
    <div class="dph-order-list">
      <div class="dph-order-list-item van-hairline--bottom" v-for="item in orderList">
        <van-row>
          <van-col :offset="1" :span="18">
            <span class="order-amount">￥{{ item.actualAmount }}</span>
            <p class="order-tip">订单金额￥{{ item.orderAmount }} &nbsp;&nbsp; 手续费￥{{ item.handlingFee }}</p>
          </van-col>
          <van-col :span="4">
            <span class="order-type">{{ item.type }}</span>
            <p class="order-time">{{ item.time }}</p>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Icon,
    Row,
    Field,
    Col,
    Uploader,
    Loading,
    Cell,
    CellGroup,
    Popup,
    Button,
    NavBar,
    Toast,
    Actionsheet
  } from 'vant';

  export default {
    name: 'statement',
    components: {
      [Loading.name]: Loading,
      [Toast.name]: Toast,
      [Button.name]: Button,
      [Icon.name]: Icon,
      [Uploader.name]: Uploader,
      [Row.name]: Row,
      [Col.name]: Col,
      [Cell.name]: Cell,
      [Popup.name]: Popup,
      [Field.name]: Field,
      [Actionsheet.name]: Actionsheet,
      [CellGroup.name]: CellGroup,
      [NavBar.name]: NavBar,
      [Button.name]: Button
    },
    data() {
      return {
        header: '对账单',
        moneyText: '100',
        isDisabledStatus: true,
        disabledClassName: 'dph-content-button',
        ordersNumber: '32',
        orderAmount: '6200.00',
        handlingFee: '10.00',
        actualAmount: '6190.00',
        orderList: [{
          orderAmount: '128.00',
          handlingFee: '3.00',
          actualAmount: '125.00',
          type: '支付宝',
          time: '19:38:10'
        }, {
          orderAmount: '12578.00',
          handlingFee: '30.00',
          actualAmount: '12548.00',
          type: '微信支付',
          time: '12:45:00'
        }]
      };
    },
    created() {
      const dates = this.$route.query.date;
      console.log(dates);
      if (dates) {
        this.header = dates + '对账单';
      }
    },
    methods: {
      onClickLeft() {
        this.$router.push('calendar');
      }
    }
  };
</script>
<style lang="less" scoped>
  .dhp-content {
    padding-top: .3rem;
    margin-bottom: .2rem;
    height: 2.5rem;
    background: #2F66F3;
    p {
      margin: 0;
    }
    .van-row {
      height: 1.25rem;
      .van-col {
        span {
          color: #6B95FF;
          font-size: 10px;
        }
        p {
          color: #fff;
          font-size: 22px;
          font-weight: bold;
        }
      }
    }
  }

  .dph-order-list {
    p {
      margin: 0;
    }
    .dph-order-list-item {
      height: 1.6rem;
      background: #fff;
      .van-row {
        padding-top: .36rem;
        .order-amount {
          color: #000;
          font-size: 18px;
        }
        .order-tip {
          color: #999;
          font-size: 11px;
        }
        .order-type {
          color: #666666;
          font-size: 12px;
        }
        .order-time {
          color: #666666;
          font-size: 12px;
        }
      }
    }
    .dph-order-list-item:active {
      background-color: #FCEBEB;
    }
  }
</style>
